<meta charSet="utf-8">
<title>relation-graph demo</title>

<!--<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>-->
<script src="../public/cdn/vue/2.6.10/vue.js"></script>
<!-- screenfull和html2canvas是relation-graph依赖的两个组件，需要引入 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/5.1.0/screenfull.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<!-- 引入relation-graph -->
<!--<script src="https://unpkg.com/relation-graph/lib/vue2/relation-graph.umd.js"></script>-->
<script src="../public/cdn/relation-graph/relation-graph.umd.js"></script>
<body>
<div id="app">
  <div style="height:calc(100vh - 30px);width:100%;border:#eeeeee solid 1px;">
    <relation-graph ref="seeksRelationGraph" :options="graphOptions"/>
  </div>
</div>
</body>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!',
      graphOptions: {
        defaultJunctionPoint: 'border'
        // 这里可以参考"Graph 图谱"中的参数进行设置
      }
    },
    mounted() {
      this.showRelationGraph();
    },
    methods: {
      showRelationGraph() {
        console.log('ref:btn:', this.$refs.btn);
        console.log('ref:', this.$refs.seeksRelationGraph);
        const __graph_json_data = {
          rootId: 'a',
          nodes: [
            { id: 'a', text: 'A', borderColor: 'yellow' },
            { id: 'b', text: 'B', color: '#43a2f1', fontColor: 'yellow' },
            { id: 'c', text: 'C', nodeShape: 1, width: 80, height: 60 },
            { id: 'e', text: 'E', nodeShape: 0, width: 150, height: 150 }
          ],
          lines: [
            { from: 'a', to: 'b', text: 'Text 1', color: '#43a2f1' },
            { from: 'a', to: 'c', text: 'Textt 2' },
            { from: 'a', to: 'e', text: 'Text 3' },
            { from: 'b', to: 'e', text: '', color: '#67C23A' }
          ]
        };
        this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
          // 这些写上当图谱初始化完成后需要执行的代码
        });
      }
    }
  })
</script>